<template>
  <div>
    <!-- 导航栏 See @/components/common/navbar.vue-->
    <navbar></navbar>
    <!-- 显示搜索结果 -->
    <div class="content">
      <!-- 测试用div -->
      <!-- <div v-for="item in res" v-bind:key="item">
        {{ item }}
      </div> -->
      <div v-if="status == 1">
        <section
          v-for="item in res"
          v-bind:key="item"
          @click="link(item._source.docid)"
          style="margin: 30px 15% 30px 15%"
        >
          <b-message type="is-info" has-icon>
            <h3>{{ item._source.title }}</h3>
            <h4>{{ item._source.text }}</h4>
          </b-message>
        </section>
      </div>
      <div v-else>
        <div class="columns is-multiline">
          <div
            v-for="item in res"
            v-bind:key="item"
            @click="link(item.gid)"
            class="column is-one-quarter"
          >
          <center>
            <vs-card>
              <template #title>
                <h3 @click="view(item.gid)">
                  {{ item.title.String }}
                </h3>
                <i
                  class="bx bx-tag"
                  v-for="tag in item.tags"
                  :key="tag"
                  style="color: pink"
                >
                  {{ tag.name ? tag.name : tag }}
                </i>
              </template>
              <template #img>
                <img v-lazy="item.images[0]" alt="Placeholder image" />
              </template>
              <template #text>
                <p style="padding: 0px 10px 15px 0px">
                  <!-- {{ gallery[(count - 1) * 3].raw.text.substr(0, 100) }} -->
                  <br />
                  <time datetime="2016-1-1" style="float: right">
                    {{ item.date.Time | dateformat("MM月DD日") }}
                  </time>
                </p>
              </template>
              <template #interactions>
                <b-tooltip
                  :label="lovenum"
                  type="is-light"
                  :delay="500"
                  position="is-top"
                >
                  <vs-button danger icon>
                    <i
                      class="bx bx-heart"
                      @mouseover="lovecount((count - 1) * 3)"
                      @click="love((count - 1) * 3)"
                    ></i>
                  </vs-button>
                </b-tooltip>
                <vs-button
                  class="btn-chat"
                  shadow
                  primary
                  @click="zone(item.userid)"
                >
                  <i class="bx bx-user"></i>
                  <span class="span">
                    {{ item.username.String }}
                  </span>
                </vs-button>
              </template>
            </vs-card>
          </center>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navbar from "../components/common/navbar.vue";
export default {
  components: { navbar },
  data() {
    return {
      value: "",
      res: [],
      gid: "",
      status: 1,
    };
  },
  methods: {
    //select change
    async link(db) {
      this.gid = db;
      this.$router.push({
        name: "Gallery",
        query: {
          gid: this.gid,
        },
      });
    },
  },
  async beforeCreate() {
    this.value = await this.$route.query.value;
    console.log(await localStorage.getItem("token"));
    let res;
    //status为1是按文本查询，为0时按tag查询，为3时按时间段查询
    if (this.$route.query.status == "1") {
      res = await this.$http.post(
        "/api/gallery/searchBody",
        { body: this.value },
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + (await localStorage.getItem("token")),
          },
        }
      );
      this.res = res.data.result;
      console.log(res.data.result);
      await this.$vs.notification({
        title: "有" + res.data.result.length + "匹配项",
      });
    } else if (this.$route.query.status == "0") {
      this.status = 0;
      res = await this.$http.get("/go/pic/search/" + this.value, {
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      });
      this.res = res.data.data;
      console.log(this.res);
      await this.$vs.notification({
        title: "有" + res.data.data.length + "匹配项",
      });
    } else if (this.$route.query.status == "3") {
      this.status = 3;
      console.log(this.$route.query.begin_time);
      console.log(this.$route.query.end_time);
      res = await this.$http.post(
        "/go/pic/fliter/time",
        {
          begin: this.$route.query.begin_time,
          end: this.$route.query.end_time,
        },
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + (await localStorage.getItem("token")),
          },
        }
      );
      console.log(res.data);
      this.res = res.data.data;
    }
  },
};
</script>
<style scoped>
.content {
  margin-top: 100px;
  min-height: calc(100vh - 34px);
}
</style>
